<template>
    <div>
      
         <div class="l-addrygl">
      <!-- <h2>基本信息</h2> -->
      <!-- 返回 -->
      <div class="l-addrygl-1">
        <div></div>
        <div class="l-addrygl-back" @click="back()">返回</div>
        <div class="head-span">门禁设备管理</div>
      </div>
      <!-- 单位信息 -->
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">设备信息</div>

          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备id" prop="gonghao">
                  <el-input v-model="ruleForm.gonghao" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备类型id" prop="username">
                  <el-input v-model="ruleForm.username" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备名称" prop="DanWeiName">
                  <el-input v-model="ruleForm.DanWeiName" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="品牌名称" prop="name">
                  <el-input v-model="ruleForm.name1" class="padding"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备编号" prop="name">
                  <el-input v-model="ruleForm.name1" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="name">
                  <span>安装时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy MM dd"
                      v-model="ruleForm.date1"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="安装位置" prop="name">
                  <el-input v-model="ruleForm.name1" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="dang">
                <el-form-item label="设备状态" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="0">关闭</el-radio>
                    <el-radio label="1">开启</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
                 <el-col :span="6">
                <el-form-item label="ip地址" prop="DanWeiName">
                  <el-input v-model="ruleForm.DanWeiName" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <!-- <div>{{ruleForm.date1}}</div> -->
              <el-col :span="6">
                <el-form-item prop="name">
                  <span>开机时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy MM dd"
                      v-model="ruleForm.date1"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="操作人员id" prop="DanWeiName">
                  <el-input v-model="ruleForm.DanWeiName" class="padding"></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="6">
                <el-form-item label="项目平面图位置" prop="DanWeiName">
                  <el-input v-model="ruleForm.DanWeiName" class="padding"></el-input>
                </el-form-item>
              </el-col>
             
            
            </el-row>
            <!-- 第四行 -->
          
          </div>
        </div>
      </el-form>
    </div>
    </div>
</template>
<script>
export default {
    data() {
    // var validateusername = (rule, value, callback) => {
    //   var reg = /^[a-zA-Z]\w{3,7}/;
    //   if (!reg.test(value)) {
    //     callback(new Error("请输入用户名"));
    //   } else {
    //     callback();
    //   }
    // };

    return {
      options1: [
        {
          value: 0,
          label: "待入场",
        },
        {
          value: 1,
          label: "入场",
        },
        {
          value: 2,
          label: "离场",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      ruleForm: {
        username: "",
        resource: "",
        status: "",
        date1: "",
        date2: "",
      },
      value: "",
      // 表单验证规则
      rules: {
        //  DanWeiName: [{ validator: validateDanWeiName, trigger: 'blur' }],
        // username: [{ validator: validateusername, trigger: "blur" }],
        // idcard: [{ validator: validateidcard, trigger: 'blur' }],
        // gonghao: [{ validator: validategonghao, trigger: 'blur' }],
      },
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        name: "人员管理",
      });
    },
    // 提交
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          axios
            .post("http://192.168.31.83/buildAdmin/login", {
              admin_account: this.ruleForm.pass,
              admin_password: this.ruleForm.checkPass,
            })
            .then((res) => {
              // if (res.data.code === 200) {
              //    console.log(res);
              //   localStorage.setItem("userToken", res.data.data);
              //   this.$router.push({
              //     // name:'人员管理'
              //     name: "塔吊监测系统",
              //   });
              // } else if (res.data.code === 201) {
              //   // console.log(res)
              //   alert("用户不存在");
              // }
            });
          // console.log(this.ruleForm)
          // alert("注册成功");
          // this.$message({
          //   showClose: true,
          //   message: '注册成功',
          //   type: 'success',
          // });
          // var timer = setInterval(function showtime() {
          //   location.href = '/login';
          // }, 3000);
        } else {
          alert("注册失败");
          // this.$message({
          //   showClose: true,
          //   message: '注册失败',
          //   type: 'error',
          // });
          return false;
        }
      });
    },
  },
};

</script>
<style scoped>
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}

/* .el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
} */
/* .el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
} */
.el-form {
  /* margin-left: 20px; */
}
.el-row {
  width: 1150px;
}
/* .el-input >>> .el-input__inner{
    display: inline-block !important;
} */
.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.l-addrygl-1 {
  font-size: 17px;
  color: #787878;
  width: 1200px;
  height: 61px;
  background: white;
  display: flex;
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.l-addrygl-2 {
  width: 1200px;
  height: 482px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.dang {
  margin-top: 40px;
}

.l-addrygl-3 {
  width: 1200px;
  height: 182px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}

</style>